<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>1. el-date-picker 的使用 | Will&#39;s blog</title>
    <meta name="generator" content="VuePress 1.5.4">
    <link rel="icon" href="/will/xin.ico">
    <link rel="stylesheet" href="../style/main.css">
    <meta name="description" content="斯人若彩虹，遇上方知有">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <link rel="preload" href="/will/assets/css/0.styles.b6de8ef8.css" as="style"><link rel="preload" href="/will/assets/js/app.e77fe8ad.js" as="script"><link rel="preload" href="/will/assets/js/3.19d8dd7e.js" as="script"><link rel="preload" href="/will/assets/js/1.cde8b311.js" as="script"><link rel="preload" href="/will/assets/js/117.c980193e.js" as="script"><link rel="prefetch" href="/will/assets/js/10.3f6ba718.js"><link rel="prefetch" href="/will/assets/js/100.139e2315.js"><link rel="prefetch" href="/will/assets/js/101.48688945.js"><link rel="prefetch" href="/will/assets/js/102.065adb71.js"><link rel="prefetch" href="/will/assets/js/103.afb27929.js"><link rel="prefetch" href="/will/assets/js/104.d56b5577.js"><link rel="prefetch" href="/will/assets/js/105.8e6de207.js"><link rel="prefetch" href="/will/assets/js/106.cf8275a7.js"><link rel="prefetch" href="/will/assets/js/107.e1219958.js"><link rel="prefetch" href="/will/assets/js/108.89f471cb.js"><link rel="prefetch" href="/will/assets/js/109.860a4646.js"><link rel="prefetch" href="/will/assets/js/11.48a3ea24.js"><link rel="prefetch" href="/will/assets/js/110.4c49a0f9.js"><link rel="prefetch" href="/will/assets/js/111.b1ff0a30.js"><link rel="prefetch" href="/will/assets/js/112.6855af7b.js"><link rel="prefetch" href="/will/assets/js/113.73cc10ce.js"><link rel="prefetch" href="/will/assets/js/114.d9f95ccf.js"><link rel="prefetch" href="/will/assets/js/115.c204c90d.js"><link rel="prefetch" href="/will/assets/js/116.b6786151.js"><link rel="prefetch" href="/will/assets/js/118.fd5f5951.js"><link rel="prefetch" href="/will/assets/js/119.2d749326.js"><link rel="prefetch" href="/will/assets/js/12.dd541a6f.js"><link rel="prefetch" href="/will/assets/js/120.c895e973.js"><link rel="prefetch" href="/will/assets/js/121.16eebc81.js"><link rel="prefetch" href="/will/assets/js/122.998e4582.js"><link rel="prefetch" href="/will/assets/js/123.487162ff.js"><link rel="prefetch" href="/will/assets/js/124.c6da26b1.js"><link rel="prefetch" href="/will/assets/js/125.4a263c66.js"><link rel="prefetch" href="/will/assets/js/126.0dc9a457.js"><link rel="prefetch" href="/will/assets/js/127.3f9cf0a9.js"><link rel="prefetch" href="/will/assets/js/128.f1b86c76.js"><link rel="prefetch" href="/will/assets/js/129.ba20315e.js"><link rel="prefetch" href="/will/assets/js/13.42b44cbf.js"><link rel="prefetch" href="/will/assets/js/130.0aa34e0b.js"><link rel="prefetch" href="/will/assets/js/131.fee81874.js"><link rel="prefetch" href="/will/assets/js/132.184d555a.js"><link rel="prefetch" href="/will/assets/js/133.15287e42.js"><link rel="prefetch" href="/will/assets/js/134.abe85c40.js"><link rel="prefetch" href="/will/assets/js/135.9ea3de85.js"><link rel="prefetch" href="/will/assets/js/136.b78a6ff1.js"><link rel="prefetch" href="/will/assets/js/137.a43d0025.js"><link rel="prefetch" href="/will/assets/js/138.19f94f16.js"><link rel="prefetch" href="/will/assets/js/139.64e33006.js"><link rel="prefetch" href="/will/assets/js/14.a6795e27.js"><link rel="prefetch" href="/will/assets/js/140.715ecf96.js"><link rel="prefetch" href="/will/assets/js/141.1ba53cc8.js"><link rel="prefetch" href="/will/assets/js/142.c524ce74.js"><link rel="prefetch" href="/will/assets/js/143.663d8f77.js"><link rel="prefetch" href="/will/assets/js/15.57ade25d.js"><link rel="prefetch" href="/will/assets/js/16.ea3d25d9.js"><link rel="prefetch" href="/will/assets/js/17.227b5567.js"><link rel="prefetch" href="/will/assets/js/18.798dabbc.js"><link rel="prefetch" href="/will/assets/js/19.92a956d1.js"><link rel="prefetch" href="/will/assets/js/20.58156a8f.js"><link rel="prefetch" href="/will/assets/js/21.be577f23.js"><link rel="prefetch" href="/will/assets/js/22.da032112.js"><link rel="prefetch" href="/will/assets/js/23.fe130883.js"><link rel="prefetch" href="/will/assets/js/24.73e19630.js"><link rel="prefetch" href="/will/assets/js/25.6e63b142.js"><link rel="prefetch" href="/will/assets/js/26.9ceb241f.js"><link rel="prefetch" href="/will/assets/js/27.a9b40edd.js"><link rel="prefetch" href="/will/assets/js/28.1898b904.js"><link rel="prefetch" href="/will/assets/js/29.f177f57a.js"><link rel="prefetch" href="/will/assets/js/30.119d11bc.js"><link rel="prefetch" href="/will/assets/js/31.2b5effe7.js"><link rel="prefetch" href="/will/assets/js/32.8f523225.js"><link rel="prefetch" href="/will/assets/js/33.bd743528.js"><link rel="prefetch" href="/will/assets/js/34.ebbfd9c7.js"><link rel="prefetch" href="/will/assets/js/35.fd8a4d41.js"><link rel="prefetch" href="/will/assets/js/36.7926ae95.js"><link rel="prefetch" href="/will/assets/js/37.d954ed43.js"><link rel="prefetch" href="/will/assets/js/38.ad4f1845.js"><link rel="prefetch" href="/will/assets/js/39.b08e799e.js"><link rel="prefetch" href="/will/assets/js/4.3889049d.js"><link rel="prefetch" href="/will/assets/js/40.f679097f.js"><link rel="prefetch" href="/will/assets/js/41.0399d427.js"><link rel="prefetch" href="/will/assets/js/42.8406af0a.js"><link rel="prefetch" href="/will/assets/js/43.81fbaed1.js"><link rel="prefetch" href="/will/assets/js/44.37da88a9.js"><link rel="prefetch" href="/will/assets/js/45.13ecbc23.js"><link rel="prefetch" href="/will/assets/js/46.c7219a20.js"><link rel="prefetch" href="/will/assets/js/47.582a1f3b.js"><link rel="prefetch" href="/will/assets/js/48.9582e48c.js"><link rel="prefetch" href="/will/assets/js/49.c4b6e61c.js"><link rel="prefetch" href="/will/assets/js/5.5225a481.js"><link rel="prefetch" href="/will/assets/js/50.1f4590f9.js"><link rel="prefetch" href="/will/assets/js/51.24b2997a.js"><link rel="prefetch" href="/will/assets/js/52.41560234.js"><link rel="prefetch" href="/will/assets/js/53.c187d861.js"><link rel="prefetch" href="/will/assets/js/54.f9228e97.js"><link rel="prefetch" href="/will/assets/js/55.a984b610.js"><link rel="prefetch" href="/will/assets/js/56.d4c315db.js"><link rel="prefetch" href="/will/assets/js/57.c53a2862.js"><link rel="prefetch" href="/will/assets/js/58.352c456f.js"><link rel="prefetch" href="/will/assets/js/59.8b4474e9.js"><link rel="prefetch" href="/will/assets/js/6.dabd5d34.js"><link rel="prefetch" href="/will/assets/js/60.7b0b22d1.js"><link rel="prefetch" href="/will/assets/js/61.c71acc1d.js"><link rel="prefetch" href="/will/assets/js/62.1e574112.js"><link rel="prefetch" href="/will/assets/js/63.e4a3ed80.js"><link rel="prefetch" href="/will/assets/js/64.8f0b32d3.js"><link rel="prefetch" href="/will/assets/js/65.b26a8612.js"><link rel="prefetch" href="/will/assets/js/66.6c1d63a4.js"><link rel="prefetch" href="/will/assets/js/67.b4373b3a.js"><link rel="prefetch" href="/will/assets/js/68.aa860531.js"><link rel="prefetch" href="/will/assets/js/69.48e4f511.js"><link rel="prefetch" href="/will/assets/js/7.659833f2.js"><link rel="prefetch" href="/will/assets/js/70.af7808fd.js"><link rel="prefetch" href="/will/assets/js/71.fa9ce741.js"><link rel="prefetch" href="/will/assets/js/72.e3cd206c.js"><link rel="prefetch" href="/will/assets/js/73.243cf46e.js"><link rel="prefetch" href="/will/assets/js/74.7cdb1f58.js"><link rel="prefetch" href="/will/assets/js/75.f22a8f44.js"><link rel="prefetch" href="/will/assets/js/76.05829c26.js"><link rel="prefetch" href="/will/assets/js/77.ce58ae8c.js"><link rel="prefetch" href="/will/assets/js/78.84c26697.js"><link rel="prefetch" href="/will/assets/js/79.e32dd7dd.js"><link rel="prefetch" href="/will/assets/js/8.f1a7e839.js"><link rel="prefetch" href="/will/assets/js/80.490f4009.js"><link rel="prefetch" href="/will/assets/js/81.96af5f79.js"><link rel="prefetch" href="/will/assets/js/82.719eb3e4.js"><link rel="prefetch" href="/will/assets/js/83.5ac308b4.js"><link rel="prefetch" href="/will/assets/js/84.e7a6be4a.js"><link rel="prefetch" href="/will/assets/js/85.943e06e1.js"><link rel="prefetch" href="/will/assets/js/86.9d30362b.js"><link rel="prefetch" href="/will/assets/js/87.74d9d285.js"><link rel="prefetch" href="/will/assets/js/88.c2fe652b.js"><link rel="prefetch" href="/will/assets/js/89.e879f671.js"><link rel="prefetch" href="/will/assets/js/9.c8e9dac1.js"><link rel="prefetch" href="/will/assets/js/90.5569b937.js"><link rel="prefetch" href="/will/assets/js/91.47320865.js"><link rel="prefetch" href="/will/assets/js/92.317dd9ba.js"><link rel="prefetch" href="/will/assets/js/93.26d10883.js"><link rel="prefetch" href="/will/assets/js/94.ba199252.js"><link rel="prefetch" href="/will/assets/js/95.4ce3b46e.js"><link rel="prefetch" href="/will/assets/js/96.d71e1886.js"><link rel="prefetch" href="/will/assets/js/97.a42a98b8.js"><link rel="prefetch" href="/will/assets/js/98.cf22a42b.js"><link rel="prefetch" href="/will/assets/js/99.f6738a3e.js">
    <link rel="stylesheet" href="/will/assets/css/0.styles.b6de8ef8.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container" data-v-2d5f533b><div data-v-2d5f533b><div id="loader-wrapper" class="loading-wrapper" data-v-d48f4d20 data-v-2d5f533b data-v-2d5f533b><div class="loader-main" data-v-d48f4d20><div data-v-d48f4d20></div><div data-v-d48f4d20></div><div data-v-d48f4d20></div><div data-v-d48f4d20></div></div> <!----> <!----></div> <div class="password-shadow password-wrapper-out" style="display:none;" data-v-64685f0e data-v-2d5f533b data-v-2d5f533b><h3 class="title" style="display:none;" data-v-64685f0e data-v-64685f0e>Will's blog</h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-64685f0e data-v-64685f0e><input type="password" value="" data-v-64685f0e> <span data-v-64685f0e>Konck! Knock!</span> <button data-v-64685f0e>OK</button></label> <div class="footer" style="display:none;" data-v-64685f0e data-v-64685f0e><span data-v-64685f0e><i class="iconfont reco-theme" data-v-64685f0e></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-64685f0e>vuePress-theme-reco</a></span> <span data-v-64685f0e><i class="iconfont reco-copyright" data-v-64685f0e></i> <a data-v-64685f0e><span data-v-64685f0e>Will</span>
            
          <span data-v-64685f0e>2020 - </span>
          2023
        </a></span></div></div> <div class="hide" data-v-2d5f533b><header class="navbar" data-v-2d5f533b><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/will/" class="home-link router-link-active"><img src="/will/xin.png" alt="Will's blog" class="logo"> <span class="site-name">Will's blog</span></a> <div class="links"><div class="color-picker"><a class="color-button"><i class="iconfont reco-color"></i></a> <div class="color-picker-menu" style="display:none;"><div class="mode-options"><h4 class="title">Choose mode</h4> <ul class="color-mode-options"><li class="dark">dark</li><li class="auto active">auto</li><li class="light">light</li></ul></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/will/" class="nav-link"><i class="iconfont reco-home"></i>
  主页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-coding"></i>
      前端
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/will/docs/note/" class="nav-link"><i class="iconfont reco-suggestion"></i>
  学习笔记
</a></li><li class="dropdown-item"><!----> <a href="/will/docs/books/" class="nav-link"><i class="iconfont reco-npm"></i>
  阅读书籍
</a></li><li class="dropdown-item"><!----> <a href="/will/docs/article/" class="nav-link"><i class="iconfont reco-api"></i>
  质量文章
</a></li><li class="dropdown-item"><!----> <a href="/will/docs/dailyNotes/" class="nav-link router-link-active"><i class="iconfont reco-suggestion"></i>
  日常笔记
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      分类
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/will/categories/Vue/" class="nav-link"><i class="iconfont undefined"></i>
  Vue
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/规范编码/" class="nav-link"><i class="iconfont undefined"></i>
  规范编码
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/项目总结/" class="nav-link"><i class="iconfont undefined"></i>
  项目总结
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/Vue组件/" class="nav-link"><i class="iconfont undefined"></i>
  Vue组件
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/javaScript/" class="nav-link"><i class="iconfont undefined"></i>
  javaScript
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/工具js库/" class="nav-link"><i class="iconfont undefined"></i>
  工具js库
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/vue/" class="nav-link"><i class="iconfont undefined"></i>
  vue
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/组件/" class="nav-link"><i class="iconfont undefined"></i>
  组件
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/TypeScript/" class="nav-link"><i class="iconfont undefined"></i>
  TypeScript
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/基础知识/" class="nav-link"><i class="iconfont undefined"></i>
  基础知识
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/总结/" class="nav-link"><i class="iconfont undefined"></i>
  总结
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/日常笔记/" class="nav-link"><i class="iconfont undefined"></i>
  日常笔记
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/学习计划/" class="nav-link"><i class="iconfont undefined"></i>
  学习计划
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/css/" class="nav-link"><i class="iconfont undefined"></i>
  css
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/element/" class="nav-link"><i class="iconfont undefined"></i>
  element
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/其他/" class="nav-link"><i class="iconfont undefined"></i>
  其他
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/Vue3/" class="nav-link"><i class="iconfont undefined"></i>
  Vue3
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/数据可视化/" class="nav-link"><i class="iconfont undefined"></i>
  数据可视化
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/算法/" class="nav-link"><i class="iconfont undefined"></i>
  算法
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/面试/" class="nav-link"><i class="iconfont undefined"></i>
  面试
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/Vite/" class="nav-link"><i class="iconfont undefined"></i>
  Vite
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/uni-app/" class="nav-link"><i class="iconfont undefined"></i>
  uni-app
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/ui框架/" class="nav-link"><i class="iconfont undefined"></i>
  ui框架
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/小程序/" class="nav-link"><i class="iconfont undefined"></i>
  小程序
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/HTML/" class="nav-link"><i class="iconfont undefined"></i>
  HTML
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/CSS/" class="nav-link"><i class="iconfont undefined"></i>
  CSS
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/React.js/" class="nav-link"><i class="iconfont undefined"></i>
  React.js
</a></li></ul></div></div><div class="nav-item"><a href="/will/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      部分项目
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/zhenzhencai/FontEndInterview" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>
  面试指南
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="/will/docs/protests/VueUI.html" class="nav-link"><i class="iconfont reco-github"></i>
  Vue轮子
</a></li></ul></div></div><div class="nav-item"><a href="/will/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间线
</a></div><div class="nav-item"><a href="/will/docs/disorder/m1.html" class="nav-link"><i class="iconfont reco-coding"></i>
  题目汇总
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      关于我
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://gitee.com/willwong" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-mayun"></i>
  Gitee
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://github.com/wangliangxin" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>
  GitHub
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=1418580404&amp;site=qq&amp;menu=yes" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-qq"></i>
  QQ
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask" data-v-2d5f533b></div> <aside class="sidebar" data-v-2d5f533b><div class="personal-info-wrapper" data-v-ca798c94 data-v-2d5f533b><img src="/will/xin.png" alt="author-avatar" class="personal-img" data-v-ca798c94> <h3 class="name" data-v-ca798c94>
    Will
  </h3> <div class="num" data-v-ca798c94><div data-v-ca798c94><h3 data-v-ca798c94>85</h3> <h6 data-v-ca798c94>Article</h6></div> <div data-v-ca798c94><h3 data-v-ca798c94>6</h3> <h6 data-v-ca798c94>Tag</h6></div></div> <hr data-v-ca798c94></div> <nav class="nav-links"><div class="nav-item"><a href="/will/" class="nav-link"><i class="iconfont reco-home"></i>
  主页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-coding"></i>
      前端
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/will/docs/note/" class="nav-link"><i class="iconfont reco-suggestion"></i>
  学习笔记
</a></li><li class="dropdown-item"><!----> <a href="/will/docs/books/" class="nav-link"><i class="iconfont reco-npm"></i>
  阅读书籍
</a></li><li class="dropdown-item"><!----> <a href="/will/docs/article/" class="nav-link"><i class="iconfont reco-api"></i>
  质量文章
</a></li><li class="dropdown-item"><!----> <a href="/will/docs/dailyNotes/" class="nav-link router-link-active"><i class="iconfont reco-suggestion"></i>
  日常笔记
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      分类
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/will/categories/Vue/" class="nav-link"><i class="iconfont undefined"></i>
  Vue
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/规范编码/" class="nav-link"><i class="iconfont undefined"></i>
  规范编码
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/项目总结/" class="nav-link"><i class="iconfont undefined"></i>
  项目总结
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/Vue组件/" class="nav-link"><i class="iconfont undefined"></i>
  Vue组件
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/javaScript/" class="nav-link"><i class="iconfont undefined"></i>
  javaScript
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/工具js库/" class="nav-link"><i class="iconfont undefined"></i>
  工具js库
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/vue/" class="nav-link"><i class="iconfont undefined"></i>
  vue
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/组件/" class="nav-link"><i class="iconfont undefined"></i>
  组件
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/TypeScript/" class="nav-link"><i class="iconfont undefined"></i>
  TypeScript
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/基础知识/" class="nav-link"><i class="iconfont undefined"></i>
  基础知识
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/总结/" class="nav-link"><i class="iconfont undefined"></i>
  总结
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/日常笔记/" class="nav-link"><i class="iconfont undefined"></i>
  日常笔记
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/学习计划/" class="nav-link"><i class="iconfont undefined"></i>
  学习计划
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/css/" class="nav-link"><i class="iconfont undefined"></i>
  css
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/element/" class="nav-link"><i class="iconfont undefined"></i>
  element
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/其他/" class="nav-link"><i class="iconfont undefined"></i>
  其他
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/Vue3/" class="nav-link"><i class="iconfont undefined"></i>
  Vue3
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/数据可视化/" class="nav-link"><i class="iconfont undefined"></i>
  数据可视化
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/算法/" class="nav-link"><i class="iconfont undefined"></i>
  算法
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/面试/" class="nav-link"><i class="iconfont undefined"></i>
  面试
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/Vite/" class="nav-link"><i class="iconfont undefined"></i>
  Vite
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/uni-app/" class="nav-link"><i class="iconfont undefined"></i>
  uni-app
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/ui框架/" class="nav-link"><i class="iconfont undefined"></i>
  ui框架
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/小程序/" class="nav-link"><i class="iconfont undefined"></i>
  小程序
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/HTML/" class="nav-link"><i class="iconfont undefined"></i>
  HTML
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/CSS/" class="nav-link"><i class="iconfont undefined"></i>
  CSS
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/React.js/" class="nav-link"><i class="iconfont undefined"></i>
  React.js
</a></li></ul></div></div><div class="nav-item"><a href="/will/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      部分项目
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/zhenzhencai/FontEndInterview" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>
  面试指南
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="/will/docs/protests/VueUI.html" class="nav-link"><i class="iconfont reco-github"></i>
  Vue轮子
</a></li></ul></div></div><div class="nav-item"><a href="/will/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间线
</a></div><div class="nav-item"><a href="/will/docs/disorder/m1.html" class="nav-link"><i class="iconfont reco-coding"></i>
  题目汇总
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      关于我
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://gitee.com/willwong" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-mayun"></i>
  Gitee
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://github.com/wangliangxin" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>
  GitHub
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=1418580404&amp;site=qq&amp;menu=yes" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-qq"></i>
  QQ
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav> <ul class="sidebar-links"><li><a href="/will/docs/dailyNotes/" aria-current="page" class="sidebar-link">1, README.md</a></li><li><a href="/will/docs/dailyNotes/21-10-07.html" class="sidebar-link">1. 21-10-07</a></li><li><a href="/will/docs/dailyNotes/21-10-17.html" class="sidebar-link">2. 21-10-17</a></li><li><a href="/will/docs/dailyNotes/21-10-18.html" class="sidebar-link">3. 21-10-18</a></li><li><a href="/will/docs/dailyNotes/21-10-28.html" class="sidebar-link">4. 21-10-28</a></li><li><a href="/will/docs/dailyNotes/21-11-01.html" class="sidebar-link">5. 21-11-01</a></li><li><a href="/will/docs/dailyNotes/21-11-04.html" class="sidebar-link">6. 21-11-04</a></li><li><a href="/will/docs/dailyNotes/21-11-09.html" class="sidebar-link">7. 21-11-09</a></li></ul> </aside> <div class="password-shadow password-wrapper-in" style="display:none;" data-v-64685f0e data-v-2d5f533b><h3 class="title" style="display:none;" data-v-64685f0e data-v-64685f0e></h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-64685f0e data-v-64685f0e><input type="password" value="" data-v-64685f0e> <span data-v-64685f0e>Konck! Knock!</span> <button data-v-64685f0e>OK</button></label> <div class="footer" style="display:none;" data-v-64685f0e data-v-64685f0e><span data-v-64685f0e><i class="iconfont reco-theme" data-v-64685f0e></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-64685f0e>vuePress-theme-reco</a></span> <span data-v-64685f0e><i class="iconfont reco-copyright" data-v-64685f0e></i> <a data-v-64685f0e><span data-v-64685f0e>Will</span>
            
          <span data-v-64685f0e>2020 - </span>
          2023
        </a></span></div></div> <div data-v-2d5f533b><main class="page"><div class="page-title" style="display:none;"><h1 class="title">1. el-date-picker 的使用</h1> <div data-v-3b7f5bdf><i class="iconfont reco-account" data-v-3b7f5bdf><span data-v-3b7f5bdf>Will</span></i> <!----> <!----> <!----></div></div> <div class="theme-reco-content content__default" style="display:none;"><h2 id="_1-el-date-picker-的使用"><a href="#_1-el-date-picker-的使用" class="header-anchor">#</a> 1. el-date-picker 的使用</h2> <p>disableDate: 设置禁用状态，参数为当前日期，要求返回 Boolean</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-date-picker</span>
  <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dateValue<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>选择日期<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:picker-options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pickerOptions<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>yyyy-MM-dd<span class="token punctuation">&quot;</span></span>
  <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token style language-css"><span class="token property">width</span><span class="token punctuation">:</span>210px</span><span class="token punctuation">&quot;</span></span></span>
  <span class="token attr-name">value-format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>yyyy-MM-dd<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handledateChange<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">@focus</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleDateFocus<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-date-picker</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
        pickerOptions<span class="token operator">:</span> <span class="token punctuation">{</span>
          <span class="token function">disabledDate</span> <span class="token punctuation">(</span><span class="token parameter">time</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> time<span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="_2"><a href="#_2" class="header-anchor">#</a> 2.</h2> <p>1,   显示1行 ，超出 ……</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span>
<span class="token property">text-overflow</span><span class="token punctuation">:</span> ellipsis<span class="token punctuation">;</span>
<span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>2， div 只显示两行，</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">overflow</span> <span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
<span class="token property">text-overflow</span><span class="token punctuation">:</span> ellipsis<span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span> -webkit-box<span class="token punctuation">;</span>
<span class="token property">-webkit-line-clamp</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span>
<span class="token property">-webkit-box-orient</span><span class="token punctuation">:</span> vertical<span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="echarts-配置参数详细"><a href="#echarts-配置参数详细" class="header-anchor">#</a> Echarts 配置参数详细</h2> <div class="language-js line-numbers-mode"><pre class="language-js"><code>theme <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token comment">// 全图默认背景</span>
    <span class="token comment">// backgroundColor: 'rgba(0,0,0,0)',</span>

    <span class="token comment">// 默认色板</span>
    color<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'#ff7f50'</span><span class="token punctuation">,</span><span class="token string">'#87cefa'</span><span class="token punctuation">,</span><span class="token string">'#da70d6'</span><span class="token punctuation">,</span><span class="token string">'#32cd32'</span><span class="token punctuation">,</span><span class="token string">'#6495ed'</span><span class="token punctuation">,</span>
            <span class="token string">'#ff69b4'</span><span class="token punctuation">,</span><span class="token string">'#ba55d3'</span><span class="token punctuation">,</span><span class="token string">'#cd5c5c'</span><span class="token punctuation">,</span><span class="token string">'#ffa500'</span><span class="token punctuation">,</span><span class="token string">'#40e0d0'</span><span class="token punctuation">,</span>
            <span class="token string">'#1e90ff'</span><span class="token punctuation">,</span><span class="token string">'#ff6347'</span><span class="token punctuation">,</span><span class="token string">'#7b68ee'</span><span class="token punctuation">,</span><span class="token string">'#00fa9a'</span><span class="token punctuation">,</span><span class="token string">'#ffd700'</span><span class="token punctuation">,</span>
            <span class="token string">'#6699FF'</span><span class="token punctuation">,</span><span class="token string">'#ff6666'</span><span class="token punctuation">,</span><span class="token string">'#3cb371'</span><span class="token punctuation">,</span><span class="token string">'#b8860b'</span><span class="token punctuation">,</span><span class="token string">'#30e0e0'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>

    <span class="token comment">// 图表标题</span>
    title<span class="token operator">:</span> <span class="token punctuation">{</span>
        x<span class="token operator">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span>                 <span class="token comment">// 水平安放位置，默认为左对齐，可选为：</span>
                                   <span class="token comment">// 'center' ¦ 'left' ¦ 'right'</span>
                                   <span class="token comment">// ¦ {number}（x坐标，单位px）</span>
        y<span class="token operator">:</span> <span class="token string">'top'</span><span class="token punctuation">,</span>                  <span class="token comment">// 垂直安放位置，默认为全图顶端，可选为：</span>
                                   <span class="token comment">// 'top' ¦ 'bottom' ¦ 'center'</span>
                                   <span class="token comment">// ¦ {number}（y坐标，单位px）</span>
        <span class="token comment">//textAlign: null          // 水平对齐方式，默认根据x设置自动调整</span>
        backgroundColor<span class="token operator">:</span> <span class="token string">'rgba(0,0,0,0)'</span><span class="token punctuation">,</span>
        borderColor<span class="token operator">:</span> <span class="token string">'#ccc'</span><span class="token punctuation">,</span>       <span class="token comment">// 标题边框颜色</span>
        borderWidth<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>            <span class="token comment">// 标题边框线宽，单位px，默认为0（无边框）</span>
        padding<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>                <span class="token comment">// 标题内边距，单位px，默认各方向内边距为5，</span>
                                   <span class="token comment">// 接受数组分别设定上右下左边距，同css</span>
        itemGap<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>               <span class="token comment">// 主副标题纵向间隔，单位px，默认为10，</span>
        textStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
            fontSize<span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
            fontWeight<span class="token operator">:</span> <span class="token string">'bolder'</span><span class="token punctuation">,</span>
            color<span class="token operator">:</span> <span class="token string">'#333'</span>          <span class="token comment">// 主标题文字颜色</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        subtextStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
            color<span class="token operator">:</span> <span class="token string">'#aaa'</span>          <span class="token comment">// 副标题文字颜色</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 图例</span>
    legend<span class="token operator">:</span> <span class="token punctuation">{</span>
        orient<span class="token operator">:</span> <span class="token string">'horizontal'</span><span class="token punctuation">,</span>      <span class="token comment">// 布局方式，默认为水平布局，可选为：</span>
                                   <span class="token comment">// 'horizontal' ¦ 'vertical'</span>
        x<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>               <span class="token comment">// 水平安放位置，默认为全图居中，可选为：</span>
                                   <span class="token comment">// 'center' ¦ 'left' ¦ 'right'</span>
                                   <span class="token comment">// ¦ {number}（x坐标，单位px）</span>
        y<span class="token operator">:</span> <span class="token string">'top'</span><span class="token punctuation">,</span>                  <span class="token comment">// 垂直安放位置，默认为全图顶端，可选为：</span>
                                   <span class="token comment">// 'top' ¦ 'bottom' ¦ 'center'</span>
                                   <span class="token comment">// ¦ {number}（y坐标，单位px）</span>
        backgroundColor<span class="token operator">:</span> <span class="token string">'rgba(0,0,0,0)'</span><span class="token punctuation">,</span>
        borderColor<span class="token operator">:</span> <span class="token string">'#ccc'</span><span class="token punctuation">,</span>       <span class="token comment">// 图例边框颜色</span>
        borderWidth<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>            <span class="token comment">// 图例边框线宽，单位px，默认为0（无边框）</span>
        padding<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>                <span class="token comment">// 图例内边距，单位px，默认各方向内边距为5，</span>
                                   <span class="token comment">// 接受数组分别设定上右下左边距，同css</span>
        itemGap<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>               <span class="token comment">// 各个item之间的间隔，单位px，默认为10，</span>
                                   <span class="token comment">// 横向布局时为水平间隔，纵向布局时为纵向间隔</span>
        itemWidth<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>             <span class="token comment">// 图例图形宽度</span>
        itemHeight<span class="token operator">:</span> <span class="token number">14</span><span class="token punctuation">,</span>            <span class="token comment">// 图例图形高度</span>
        textStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
            color<span class="token operator">:</span> <span class="token string">'#333'</span>          <span class="token comment">// 图例文字颜色</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 值域</span>
    dataRange<span class="token operator">:</span> <span class="token punctuation">{</span>
        orient<span class="token operator">:</span> <span class="token string">'vertical'</span><span class="token punctuation">,</span>        <span class="token comment">// 布局方式，默认为垂直布局，可选为：</span>
                                   <span class="token comment">// 'horizontal' ¦ 'vertical'</span>
        x<span class="token operator">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span>                 <span class="token comment">// 水平安放位置，默认为全图左对齐，可选为：</span>
                                   <span class="token comment">// 'center' ¦ 'left' ¦ 'right'</span>
                                   <span class="token comment">// ¦ {number}（x坐标，单位px）</span>
        y<span class="token operator">:</span> <span class="token string">'bottom'</span><span class="token punctuation">,</span>               <span class="token comment">// 垂直安放位置，默认为全图底部，可选为：</span>
                                   <span class="token comment">// 'top' ¦ 'bottom' ¦ 'center'</span>
                                   <span class="token comment">// ¦ {number}（y坐标，单位px）</span>
        backgroundColor<span class="token operator">:</span> <span class="token string">'rgba(0,0,0,0)'</span><span class="token punctuation">,</span>
        borderColor<span class="token operator">:</span> <span class="token string">'#ccc'</span><span class="token punctuation">,</span>       <span class="token comment">// 值域边框颜色</span>
        borderWidth<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>            <span class="token comment">// 值域边框线宽，单位px，默认为0（无边框）</span>
        padding<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>                <span class="token comment">// 值域内边距，单位px，默认各方向内边距为5，</span>
                                   <span class="token comment">// 接受数组分别设定上右下左边距，同css</span>
        itemGap<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>               <span class="token comment">// 各个item之间的间隔，单位px，默认为10，</span>
                                   <span class="token comment">// 横向布局时为水平间隔，纵向布局时为纵向间隔</span>
        itemWidth<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>             <span class="token comment">// 值域图形宽度，线性渐变水平布局宽度为该值 * 10</span>
        itemHeight<span class="token operator">:</span> <span class="token number">14</span><span class="token punctuation">,</span>            <span class="token comment">// 值域图形高度，线性渐变垂直布局高度为该值 * 10</span>
        splitNumber<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>            <span class="token comment">// 分割段数，默认为5，为0时为线性渐变</span>
        color<span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">'#1e90ff'</span><span class="token punctuation">,</span><span class="token string">'#f0ffff'</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token comment">//颜色 </span>
        <span class="token comment">//text:['高','低'],         // 文本，默认为数值文本</span>
        textStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
            color<span class="token operator">:</span> <span class="token string">'#333'</span>          <span class="token comment">// 值域文字颜色</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    toolbox<span class="token operator">:</span> <span class="token punctuation">{</span>
        orient<span class="token operator">:</span> <span class="token string">'horizontal'</span><span class="token punctuation">,</span>      <span class="token comment">// 布局方式，默认为水平布局，可选为：</span>
                                   <span class="token comment">// 'horizontal' ¦ 'vertical'</span>
        x<span class="token operator">:</span> <span class="token string">'right'</span><span class="token punctuation">,</span>                <span class="token comment">// 水平安放位置，默认为全图右对齐，可选为：</span>
                                   <span class="token comment">// 'center' ¦ 'left' ¦ 'right'</span>
                                   <span class="token comment">// ¦ {number}（x坐标，单位px）</span>
        y<span class="token operator">:</span> <span class="token string">'top'</span><span class="token punctuation">,</span>                  <span class="token comment">// 垂直安放位置，默认为全图顶端，可选为：</span>
                                   <span class="token comment">// 'top' ¦ 'bottom' ¦ 'center'</span>
                                   <span class="token comment">// ¦ {number}（y坐标，单位px）</span>
        color <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'#1e90ff'</span><span class="token punctuation">,</span><span class="token string">'#22bb22'</span><span class="token punctuation">,</span><span class="token string">'#4b0082'</span><span class="token punctuation">,</span><span class="token string">'#d2691e'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        backgroundColor<span class="token operator">:</span> <span class="token string">'rgba(0,0,0,0)'</span><span class="token punctuation">,</span> <span class="token comment">// 工具箱背景颜色</span>
        borderColor<span class="token operator">:</span> <span class="token string">'#ccc'</span><span class="token punctuation">,</span>       <span class="token comment">// 工具箱边框颜色</span>
        borderWidth<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>            <span class="token comment">// 工具箱边框线宽，单位px，默认为0（无边框）</span>
        padding<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>                <span class="token comment">// 工具箱内边距，单位px，默认各方向内边距为5，</span>
                                   <span class="token comment">// 接受数组分别设定上右下左边距，同css</span>
        itemGap<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>               <span class="token comment">// 各个item之间的间隔，单位px，默认为10，</span>
                                   <span class="token comment">// 横向布局时为水平间隔，纵向布局时为纵向间隔</span>
        itemSize<span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span>              <span class="token comment">// 工具箱图形宽度</span>
        featureImageIcon <span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>     <span class="token comment">// 自定义图片icon</span>
        featureTitle <span class="token operator">:</span> <span class="token punctuation">{</span>
            mark <span class="token operator">:</span> <span class="token string">'辅助线开关'</span><span class="token punctuation">,</span>
            markUndo <span class="token operator">:</span> <span class="token string">'删除辅助线'</span><span class="token punctuation">,</span>
            markClear <span class="token operator">:</span> <span class="token string">'清空辅助线'</span><span class="token punctuation">,</span>
            dataZoom <span class="token operator">:</span> <span class="token string">'区域缩放'</span><span class="token punctuation">,</span>
            dataZoomReset <span class="token operator">:</span> <span class="token string">'区域缩放后退'</span><span class="token punctuation">,</span>
            dataView <span class="token operator">:</span> <span class="token string">'数据视图'</span><span class="token punctuation">,</span>
            lineChart <span class="token operator">:</span> <span class="token string">'折线图切换'</span><span class="token punctuation">,</span>
            barChart <span class="token operator">:</span> <span class="token string">'柱形图切换'</span><span class="token punctuation">,</span>
            restore <span class="token operator">:</span> <span class="token string">'还原'</span><span class="token punctuation">,</span>
            saveAsImage <span class="token operator">:</span> <span class="token string">'保存为图片'</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 提示框</span>
    tooltip<span class="token operator">:</span> <span class="token punctuation">{</span>
        trigger<span class="token operator">:</span> <span class="token string">'item'</span><span class="token punctuation">,</span>           <span class="token comment">// 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'</span>
        showDelay<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>             <span class="token comment">// 显示延迟，添加显示延迟可以避免频繁切换，单位ms</span>
        hideDelay<span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>            <span class="token comment">// 隐藏延迟，单位ms</span>
        transitionDuration <span class="token operator">:</span> <span class="token number">0.4</span><span class="token punctuation">,</span>  <span class="token comment">// 动画变换时间，单位s</span>
        backgroundColor<span class="token operator">:</span> <span class="token string">'rgba(0,0,0,0.7)'</span><span class="token punctuation">,</span>     <span class="token comment">// 提示背景颜色，默认为透明度为0.7的黑色</span>
        borderColor<span class="token operator">:</span> <span class="token string">'#333'</span><span class="token punctuation">,</span>       <span class="token comment">// 提示边框颜色</span>
        borderRadius<span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>           <span class="token comment">// 提示边框圆角，单位px，默认为4</span>
        borderWidth<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>            <span class="token comment">// 提示边框线宽，单位px，默认为0（无边框）</span>
        padding<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>                <span class="token comment">// 提示内边距，单位px，默认各方向内边距为5，</span>
                                   <span class="token comment">// 接受数组分别设定上右下左边距，同css</span>
        axisPointer <span class="token operator">:</span> <span class="token punctuation">{</span>            <span class="token comment">// 坐标轴指示器，坐标轴触发有效</span>
            type <span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>         <span class="token comment">// 默认为直线，可选为：'line' | 'shadow'</span>
            lineStyle <span class="token operator">:</span> <span class="token punctuation">{</span>          <span class="token comment">// 直线指示器样式设置</span>
                color<span class="token operator">:</span> <span class="token string">'#48b'</span><span class="token punctuation">,</span>
                width<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
                type<span class="token operator">:</span> <span class="token string">'solid'</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            shadowStyle <span class="token operator">:</span> <span class="token punctuation">{</span>                       <span class="token comment">// 阴影指示器样式设置</span>
                width<span class="token operator">:</span> <span class="token string">'auto'</span><span class="token punctuation">,</span>                   <span class="token comment">// 阴影大小</span>
                color<span class="token operator">:</span> <span class="token string">'rgba(150,150,150,0.3)'</span>  <span class="token comment">// 阴影颜色</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        textStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
            color<span class="token operator">:</span> <span class="token string">'#fff'</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 区域缩放控制器</span>
    dataZoom<span class="token operator">:</span> <span class="token punctuation">{</span>
        orient<span class="token operator">:</span> <span class="token string">'horizontal'</span><span class="token punctuation">,</span>      <span class="token comment">// 布局方式，默认为水平布局，可选为：</span>
                                   <span class="token comment">// 'horizontal' ¦ 'vertical'</span>
        <span class="token comment">// x: {number},            // 水平安放位置，默认为根据grid参数适配，可选为：</span>
                                   <span class="token comment">// {number}（x坐标，单位px）</span>
        <span class="token comment">// y: {number},            // 垂直安放位置，默认为根据grid参数适配，可选为：</span>
                                   <span class="token comment">// {number}（y坐标，单位px）</span>
        <span class="token comment">// width: {number},        // 指定宽度，横向布局时默认为根据grid参数适配</span>
        <span class="token comment">// height: {number},       // 指定高度，纵向布局时默认为根据grid参数适配</span>
        backgroundColor<span class="token operator">:</span> <span class="token string">'rgba(0,0,0,0)'</span><span class="token punctuation">,</span>       <span class="token comment">// 背景颜色</span>
        dataBackgroundColor<span class="token operator">:</span> <span class="token string">'#eee'</span><span class="token punctuation">,</span>            <span class="token comment">// 数据背景颜色</span>
        fillerColor<span class="token operator">:</span> <span class="token string">'rgba(144,197,237,0.2)'</span><span class="token punctuation">,</span>   <span class="token comment">// 填充颜色</span>
        handleColor<span class="token operator">:</span> <span class="token string">'rgba(70,130,180,0.8)'</span>     <span class="token comment">// 手柄颜色</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 网格</span>
    grid<span class="token operator">:</span> <span class="token punctuation">{</span>
        x<span class="token operator">:</span> <span class="token number">80</span><span class="token punctuation">,</span>
        y<span class="token operator">:</span> <span class="token number">60</span><span class="token punctuation">,</span>
        x2<span class="token operator">:</span> <span class="token number">80</span><span class="token punctuation">,</span>
        y2<span class="token operator">:</span> <span class="token number">60</span><span class="token punctuation">,</span>
        <span class="token comment">// width: {totalWidth} - x - x2,</span>
        <span class="token comment">// height: {totalHeight} - y - y2,</span>
        backgroundColor<span class="token operator">:</span> <span class="token string">'rgba(0,0,0,0)'</span><span class="token punctuation">,</span>
        borderWidth<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
        borderColor<span class="token operator">:</span> <span class="token string">'#ccc'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 类目轴</span>
    categoryAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
        position<span class="token operator">:</span> <span class="token string">'bottom'</span><span class="token punctuation">,</span>    <span class="token comment">// 位置</span>
        nameLocation<span class="token operator">:</span> <span class="token string">'end'</span><span class="token punctuation">,</span>   <span class="token comment">// 坐标轴名字位置，支持'start' | 'end'</span>
        boundaryGap<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>     <span class="token comment">// 类目起始和结束两端空白策略</span>
        axisLine<span class="token operator">:</span> <span class="token punctuation">{</span>            <span class="token comment">// 坐标轴线</span>
            show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>        <span class="token comment">// 默认显示，属性show控制显示与否</span>
            lineStyle<span class="token operator">:</span> <span class="token punctuation">{</span>       <span class="token comment">// 属性lineStyle控制线条样式</span>
                color<span class="token operator">:</span> <span class="token string">'#48b'</span><span class="token punctuation">,</span>
                width<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
                type<span class="token operator">:</span> <span class="token string">'solid'</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        axisTick<span class="token operator">:</span> <span class="token punctuation">{</span>            <span class="token comment">// 坐标轴小标记</span>
            show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>       <span class="token comment">// 属性show控制显示与否，默认不显示</span>
            interval<span class="token operator">:</span> <span class="token string">'auto'</span><span class="token punctuation">,</span>
            <span class="token comment">// onGap: null,</span>
            inside <span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>    <span class="token comment">// 控制小标记是否在grid里 </span>
            length <span class="token operator">:</span><span class="token number">5</span><span class="token punctuation">,</span>         <span class="token comment">// 属性length控制线长</span>
            lineStyle<span class="token operator">:</span> <span class="token punctuation">{</span>       <span class="token comment">// 属性lineStyle控制线条样式</span>
                color<span class="token operator">:</span> <span class="token string">'#333'</span><span class="token punctuation">,</span>
                width<span class="token operator">:</span> <span class="token number">1</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        axisLabel<span class="token operator">:</span> <span class="token punctuation">{</span>           <span class="token comment">// 坐标轴文本标签，详见axis.axisLabel</span>
            show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
            interval<span class="token operator">:</span> <span class="token string">'auto'</span><span class="token punctuation">,</span>
            rotate<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
            margin<span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
            <span class="token comment">// formatter: null,</span>
            textStyle<span class="token operator">:</span> <span class="token punctuation">{</span>       <span class="token comment">// 其余属性默认使用全局文本样式，详见TEXTSTYLE</span>
                color<span class="token operator">:</span> <span class="token string">'#333'</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        splitLine<span class="token operator">:</span> <span class="token punctuation">{</span>           <span class="token comment">// 分隔线</span>
            show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>        <span class="token comment">// 默认显示，属性show控制显示与否</span>
            <span class="token comment">// onGap: null,</span>
            lineStyle<span class="token operator">:</span> <span class="token punctuation">{</span>       <span class="token comment">// 属性lineStyle（详见lineStyle）控制线条样式</span>
                color<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'#ccc'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
                width<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
                type<span class="token operator">:</span> <span class="token string">'solid'</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        splitArea<span class="token operator">:</span> <span class="token punctuation">{</span>           <span class="token comment">// 分隔区域</span>
            show<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>       <span class="token comment">// 默认不显示，属性show控制显示与否</span>
            <span class="token comment">// onGap: null,</span>
            areaStyle<span class="token operator">:</span> <span class="token punctuation">{</span>       <span class="token comment">// 属性areaStyle（详见areaStyle）控制区域样式</span>
                color<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'rgba(250,250,250,0.3)'</span><span class="token punctuation">,</span><span class="token string">'rgba(200,200,200,0.3)'</span><span class="token punctuation">]</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 数值型坐标轴默认参数</span>
    valueAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
        position<span class="token operator">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span>      <span class="token comment">// 位置</span>
        nameLocation<span class="token operator">:</span> <span class="token string">'end'</span><span class="token punctuation">,</span>   <span class="token comment">// 坐标轴名字位置，支持'start' | 'end'</span>
        nameTextStyle<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>     <span class="token comment">// 坐标轴文字样式，默认取全局样式</span>
        boundaryGap<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>   <span class="token comment">// 数值起始和结束两端空白策略</span>
        splitNumber<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>        <span class="token comment">// 分割段数，默认为5</span>
        axisLine<span class="token operator">:</span> <span class="token punctuation">{</span>            <span class="token comment">// 坐标轴线</span>
            show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>        <span class="token comment">// 默认显示，属性show控制显示与否</span>
            lineStyle<span class="token operator">:</span> <span class="token punctuation">{</span>       <span class="token comment">// 属性lineStyle控制线条样式</span>
                color<span class="token operator">:</span> <span class="token string">'#48b'</span><span class="token punctuation">,</span>
                width<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
                type<span class="token operator">:</span> <span class="token string">'solid'</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        axisTick<span class="token operator">:</span> <span class="token punctuation">{</span>            <span class="token comment">// 坐标轴小标记</span>
            show<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>       <span class="token comment">// 属性show控制显示与否，默认不显示</span>
            inside <span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>    <span class="token comment">// 控制小标记是否在grid里 </span>
            length <span class="token operator">:</span><span class="token number">5</span><span class="token punctuation">,</span>         <span class="token comment">// 属性length控制线长</span>
            lineStyle<span class="token operator">:</span> <span class="token punctuation">{</span>       <span class="token comment">// 属性lineStyle控制线条样式</span>
                color<span class="token operator">:</span> <span class="token string">'#333'</span><span class="token punctuation">,</span>
                width<span class="token operator">:</span> <span class="token number">1</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        axisLabel<span class="token operator">:</span> <span class="token punctuation">{</span>           <span class="token comment">// 坐标轴文本标签，详见axis.axisLabel</span>
            show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
            rotate<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
            margin<span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
            <span class="token comment">// formatter: null,</span>
            textStyle<span class="token operator">:</span> <span class="token punctuation">{</span>       <span class="token comment">// 其余属性默认使用全局文本样式，详见TEXTSTYLE</span>
                color<span class="token operator">:</span> <span class="token string">'#333'</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        splitLine<span class="token operator">:</span> <span class="token punctuation">{</span>           <span class="token comment">// 分隔线</span>
            show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>        <span class="token comment">// 默认显示，属性show控制显示与否</span>
            lineStyle<span class="token operator">:</span> <span class="token punctuation">{</span>       <span class="token comment">// 属性lineStyle（详见lineStyle）控制线条样式</span>
                color<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'#ccc'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
                width<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
                type<span class="token operator">:</span> <span class="token string">'solid'</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        splitArea<span class="token operator">:</span> <span class="token punctuation">{</span>           <span class="token comment">// 分隔区域</span>
            show<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>       <span class="token comment">// 默认不显示，属性show控制显示与否</span>
            areaStyle<span class="token operator">:</span> <span class="token punctuation">{</span>       <span class="token comment">// 属性areaStyle（详见areaStyle）控制区域样式</span>
                color<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'rgba(250,250,250,0.3)'</span><span class="token punctuation">,</span><span class="token string">'rgba(200,200,200,0.3)'</span><span class="token punctuation">]</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    polar <span class="token operator">:</span> <span class="token punctuation">{</span>
        center <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'50%'</span><span class="token punctuation">,</span> <span class="token string">'50%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>    <span class="token comment">// 默认全局居中</span>
        radius <span class="token operator">:</span> <span class="token string">'75%'</span><span class="token punctuation">,</span>
        startAngle <span class="token operator">:</span> <span class="token number">90</span><span class="token punctuation">,</span>
        splitNumber <span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
        name <span class="token operator">:</span> <span class="token punctuation">{</span>
            show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
            textStyle<span class="token operator">:</span> <span class="token punctuation">{</span>       <span class="token comment">// 其余属性默认使用全局文本样式，详见TEXTSTYLE</span>
                color<span class="token operator">:</span> <span class="token string">'#333'</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        axisLine<span class="token operator">:</span> <span class="token punctuation">{</span>            <span class="token comment">// 坐标轴线</span>
            show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>        <span class="token comment">// 默认显示，属性show控制显示与否</span>
            lineStyle<span class="token operator">:</span> <span class="token punctuation">{</span>       <span class="token comment">// 属性lineStyle控制线条样式</span>
                color<span class="token operator">:</span> <span class="token string">'#ccc'</span><span class="token punctuation">,</span>
                width<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
                type<span class="token operator">:</span> <span class="token string">'solid'</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        axisLabel<span class="token operator">:</span> <span class="token punctuation">{</span>           <span class="token comment">// 坐标轴文本标签，详见axis.axisLabel</span>
            show<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
            textStyle<span class="token operator">:</span> <span class="token punctuation">{</span>       <span class="token comment">// 其余属性默认使用全局文本样式，详见TEXTSTYLE</span>
                color<span class="token operator">:</span> <span class="token string">'#333'</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        splitArea <span class="token operator">:</span> <span class="token punctuation">{</span>
            show <span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
            areaStyle <span class="token operator">:</span> <span class="token punctuation">{</span>
                color<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'rgba(250,250,250,0.3)'</span><span class="token punctuation">,</span><span class="token string">'rgba(200,200,200,0.3)'</span><span class="token punctuation">]</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        splitLine <span class="token operator">:</span> <span class="token punctuation">{</span>
            show <span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
            lineStyle <span class="token operator">:</span> <span class="token punctuation">{</span>
                width <span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
                color <span class="token operator">:</span> <span class="token string">'#ccc'</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 柱形图默认参数</span>
    bar<span class="token operator">:</span> <span class="token punctuation">{</span>
        barMinHeight<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>          <span class="token comment">// 最小高度改为0</span>
        <span class="token comment">// barWidth: null,        // 默认自适应</span>
        barGap<span class="token operator">:</span> <span class="token string">'30%'</span><span class="token punctuation">,</span>            <span class="token comment">// 柱间距离，默认为柱形宽度的30%，可设固定值</span>
        barCategoryGap <span class="token operator">:</span> <span class="token string">'20%'</span><span class="token punctuation">,</span>   <span class="token comment">// 类目间柱形距离，默认为类目间距的20%，可设固定值</span>
        itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
            normal<span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token comment">// color: '各异',</span>
                barBorderColor<span class="token operator">:</span> <span class="token string">'#fff'</span><span class="token punctuation">,</span>       <span class="token comment">// 柱条边线</span>
                barBorderRadius<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>           <span class="token comment">// 柱条边线圆角，单位px，默认为0</span>
                barBorderWidth<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>            <span class="token comment">// 柱条边线线宽，单位px，默认为1</span>
                label<span class="token operator">:</span> <span class="token punctuation">{</span>
                    show<span class="token operator">:</span> <span class="token boolean">false</span>
                    <span class="token comment">// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为</span>
                    <span class="token comment">//           'inside'|'left'|'right'|'top'|'bottom'</span>
                    <span class="token comment">// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            emphasis<span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token comment">// color: '各异',</span>
                barBorderColor<span class="token operator">:</span> <span class="token string">'rgba(0,0,0,0)'</span><span class="token punctuation">,</span>   <span class="token comment">// 柱条边线</span>
                barBorderRadius<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>                <span class="token comment">// 柱条边线圆角，单位px，默认为0</span>
                barBorderWidth<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>                 <span class="token comment">// 柱条边线线宽，单位px，默认为1</span>
                label<span class="token operator">:</span> <span class="token punctuation">{</span>
                    show<span class="token operator">:</span> <span class="token boolean">false</span>
                    <span class="token comment">// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为</span>
                    <span class="token comment">//           'inside'|'left'|'right'|'top'|'bottom'</span>
                    <span class="token comment">// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 折线图默认参数</span>
    line<span class="token operator">:</span> <span class="token punctuation">{</span>
        itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
            normal<span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token comment">// color: 各异,</span>
                label<span class="token operator">:</span> <span class="token punctuation">{</span>
                    show<span class="token operator">:</span> <span class="token boolean">false</span>
                    <span class="token comment">// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为</span>
                    <span class="token comment">//           'inside'|'left'|'right'|'top'|'bottom'</span>
                    <span class="token comment">// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                lineStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
                    width<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
                    type<span class="token operator">:</span> <span class="token string">'solid'</span><span class="token punctuation">,</span>
                    shadowColor <span class="token operator">:</span> <span class="token string">'rgba(0,0,0,0)'</span><span class="token punctuation">,</span> <span class="token comment">//默认透明</span>
                    shadowBlur<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
                    shadowOffsetX<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
                    shadowOffsetY<span class="token operator">:</span> <span class="token number">3</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            emphasis<span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token comment">// color: 各异,</span>
                label<span class="token operator">:</span> <span class="token punctuation">{</span>
                    show<span class="token operator">:</span> <span class="token boolean">false</span>
                    <span class="token comment">// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为</span>
                    <span class="token comment">//           'inside'|'left'|'right'|'top'|'bottom'</span>
                    <span class="token comment">// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">//smooth : false,</span>
        <span class="token comment">//symbol: null,         // 拐点图形类型</span>
        symbolSize<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>          <span class="token comment">// 拐点图形大小</span>
        <span class="token comment">//symbolRotate : null,  // 拐点图形旋转控制</span>
        showAllSymbol<span class="token operator">:</span> <span class="token boolean">false</span>    <span class="token comment">// 标志图形默认只有主轴显示（随主轴标签间隔隐藏策略）</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// K线图默认参数</span>
    k<span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token comment">// barWidth : null          // 默认自适应</span>
        <span class="token comment">// barMaxWidth : null       // 默认自适应 </span>
        itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
            normal<span class="token operator">:</span> <span class="token punctuation">{</span>
                color<span class="token operator">:</span> <span class="token string">'#fff'</span><span class="token punctuation">,</span>          <span class="token comment">// 阳线填充颜色</span>
                color0<span class="token operator">:</span> <span class="token string">'#00aa11'</span><span class="token punctuation">,</span>      <span class="token comment">// 阴线填充颜色</span>
                lineStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
                    width<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
                    color<span class="token operator">:</span> <span class="token string">'#ff3200'</span><span class="token punctuation">,</span>   <span class="token comment">// 阳线边框颜色</span>
                    color0<span class="token operator">:</span> <span class="token string">'#00aa11'</span>   <span class="token comment">// 阴线边框颜色</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            emphasis<span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token comment">// color: 各异,</span>
                <span class="token comment">// color0: 各异</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 散点图默认参数</span>
    scatter<span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token comment">//symbol: null,      // 图形类型</span>
        symbolSize<span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>       <span class="token comment">// 图形大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2</span>
        <span class="token comment">//symbolRotate : null,  // 图形旋转控制</span>
        large<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>        <span class="token comment">// 大规模散点图</span>
        largeThreshold<span class="token operator">:</span> <span class="token number">2000</span><span class="token punctuation">,</span><span class="token comment">// 大规模阀值，large为true且数据量&gt;largeThreshold才启用大规模模式</span>
        itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
            normal<span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token comment">// color: 各异,</span>
                label<span class="token operator">:</span> <span class="token punctuation">{</span>
                    show<span class="token operator">:</span> <span class="token boolean">false</span>
                    <span class="token comment">// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为</span>
                    <span class="token comment">//           'inside'|'left'|'right'|'top'|'bottom'</span>
                    <span class="token comment">// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            emphasis<span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token comment">// color: '各异'</span>
                label<span class="token operator">:</span> <span class="token punctuation">{</span>
                    show<span class="token operator">:</span> <span class="token boolean">false</span>
                    <span class="token comment">// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为</span>
                    <span class="token comment">//           'inside'|'left'|'right'|'top'|'bottom'</span>
                    <span class="token comment">// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 雷达图默认参数</span>
    radar <span class="token operator">:</span> <span class="token punctuation">{</span>
        itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
            normal<span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token comment">// color: 各异,</span>
                label<span class="token operator">:</span> <span class="token punctuation">{</span>
                    show<span class="token operator">:</span> <span class="token boolean">false</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                lineStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
                    width<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
                    type<span class="token operator">:</span> <span class="token string">'solid'</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            emphasis<span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token comment">// color: 各异,</span>
                label<span class="token operator">:</span> <span class="token punctuation">{</span>
                    show<span class="token operator">:</span> <span class="token boolean">false</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">//symbol: null,         // 拐点图形类型</span>
        symbolSize<span class="token operator">:</span> <span class="token number">2</span>           <span class="token comment">// 可计算特性参数，空数据拖拽提示图形大小</span>
        <span class="token comment">//symbolRotate : null,  // 图形旋转控制</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 饼图默认参数</span>
    pie<span class="token operator">:</span> <span class="token punctuation">{</span>
        center <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'50%'</span><span class="token punctuation">,</span> <span class="token string">'50%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>    <span class="token comment">// 默认全局居中</span>
        radius <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token string">'75%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        clockWise <span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>          <span class="token comment">// 默认逆时针</span>
        startAngle<span class="token operator">:</span> <span class="token number">90</span><span class="token punctuation">,</span>
        minAngle<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>                <span class="token comment">// 最小角度改为0</span>
        selectedOffset<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>         <span class="token comment">// 选中是扇区偏移量</span>
        itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
            normal<span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token comment">// color: 各异,</span>
                borderColor<span class="token operator">:</span> <span class="token string">'#fff'</span><span class="token punctuation">,</span>
                borderWidth<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
                label<span class="token operator">:</span> <span class="token punctuation">{</span>
                    show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
                    position<span class="token operator">:</span> <span class="token string">'outer'</span>
                    <span class="token comment">// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                labelLine<span class="token operator">:</span> <span class="token punctuation">{</span>
                    show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
                    length<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
                    lineStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
                        <span class="token comment">// color: 各异,</span>
                        width<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
                        type<span class="token operator">:</span> <span class="token string">'solid'</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            emphasis<span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token comment">// color: 各异,</span>
                borderColor<span class="token operator">:</span> <span class="token string">'rgba(0,0,0,0)'</span><span class="token punctuation">,</span>
                borderWidth<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
                label<span class="token operator">:</span> <span class="token punctuation">{</span>
                    show<span class="token operator">:</span> <span class="token boolean">false</span>
                    <span class="token comment">// position: 'outer'</span>
                    <span class="token comment">// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                labelLine<span class="token operator">:</span> <span class="token punctuation">{</span>
                    show<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
                    length<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
                    lineStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
                        <span class="token comment">// color: 各异,</span>
                        width<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
                        type<span class="token operator">:</span> <span class="token string">'solid'</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    map<span class="token operator">:</span> <span class="token punctuation">{</span>
        mapType<span class="token operator">:</span> <span class="token string">'china'</span><span class="token punctuation">,</span>   <span class="token comment">// 各省的mapType暂时都用中文</span>
        mapLocation<span class="token operator">:</span> <span class="token punctuation">{</span>
            x <span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
            y <span class="token operator">:</span> <span class="token string">'center'</span>
            <span class="token comment">// width    // 自适应</span>
            <span class="token comment">// height   // 自适应</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        showLegendSymbol <span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>       <span class="token comment">// 显示图例颜色标识（系列标识的小圆点），存在legend时生效</span>
        itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
            normal<span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token comment">// color: 各异,</span>
                borderColor<span class="token operator">:</span> <span class="token string">'#fff'</span><span class="token punctuation">,</span>
                borderWidth<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
                areaStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
                    color<span class="token operator">:</span> <span class="token string">'#ccc'</span><span class="token comment">//rgba(135,206,250,0.8)</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                label<span class="token operator">:</span> <span class="token punctuation">{</span>
                    show<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
                    textStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
                        color<span class="token operator">:</span> <span class="token string">'rgba(139,69,19,1)'</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            emphasis<span class="token operator">:</span> <span class="token punctuation">{</span>                 <span class="token comment">// 也是选中样式</span>
                <span class="token comment">// color: 各异,</span>
                borderColor<span class="token operator">:</span> <span class="token string">'rgba(0,0,0,0)'</span><span class="token punctuation">,</span>
                borderWidth<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
                areaStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
                    color<span class="token operator">:</span> <span class="token string">'rgba(255,215,0,0.8)'</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                label<span class="token operator">:</span> <span class="token punctuation">{</span>
                    show<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
                    textStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
                        color<span class="token operator">:</span> <span class="token string">'rgba(139,69,19,1)'</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    force <span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token comment">// 数据map到圆的半径的最小值和最大值</span>
        minRadius <span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
        maxRadius <span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
        density <span class="token operator">:</span> <span class="token number">1.0</span><span class="token punctuation">,</span>
        attractiveness <span class="token operator">:</span> <span class="token number">1.0</span><span class="token punctuation">,</span>
        <span class="token comment">// 初始化的随机大小位置</span>
        initSize <span class="token operator">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
        <span class="token comment">// 向心力因子，越大向心力越大</span>
        centripetal <span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
        <span class="token comment">// 冷却因子</span>
        coolDown <span class="token operator">:</span> <span class="token number">0.99</span><span class="token punctuation">,</span>
        <span class="token comment">// 分类里如果有样式会覆盖节点默认样式</span>
        itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
            normal<span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token comment">// color: 各异,</span>
                label<span class="token operator">:</span> <span class="token punctuation">{</span>
                    show<span class="token operator">:</span> <span class="token boolean">false</span>
                    <span class="token comment">// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                nodeStyle <span class="token operator">:</span> <span class="token punctuation">{</span>
                    brushType <span class="token operator">:</span> <span class="token string">'both'</span><span class="token punctuation">,</span>
                    color <span class="token operator">:</span> <span class="token string">'#f08c2e'</span><span class="token punctuation">,</span>
                    strokeColor <span class="token operator">:</span> <span class="token string">'#5182ab'</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                linkStyle <span class="token operator">:</span> <span class="token punctuation">{</span>
                    strokeColor <span class="token operator">:</span> <span class="token string">'#5182ab'</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            emphasis<span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token comment">// color: 各异,</span>
                label<span class="token operator">:</span> <span class="token punctuation">{</span>
                    show<span class="token operator">:</span> <span class="token boolean">false</span>
                    <span class="token comment">// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                nodeStyle <span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                linkStyle <span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    chord <span class="token operator">:</span> <span class="token punctuation">{</span>
        radius <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'65%'</span><span class="token punctuation">,</span> <span class="token string">'75%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        center <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'50%'</span><span class="token punctuation">,</span> <span class="token string">'50%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        padding <span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
        sort <span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span> <span class="token comment">// can be 'none', 'ascending', 'descending'</span>
        sortSub <span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span> <span class="token comment">// can be 'none', 'ascending', 'descending'</span>
        startAngle <span class="token operator">:</span> <span class="token number">90</span><span class="token punctuation">,</span>
        clockWise <span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        showScale <span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        showScaleText <span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        itemStyle <span class="token operator">:</span> <span class="token punctuation">{</span>
            normal <span class="token operator">:</span> <span class="token punctuation">{</span>
                label <span class="token operator">:</span> <span class="token punctuation">{</span>
                    show <span class="token operator">:</span> <span class="token boolean">true</span>
                    <span class="token comment">// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                lineStyle <span class="token operator">:</span> <span class="token punctuation">{</span>
                    width <span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
                    color <span class="token operator">:</span> <span class="token string">'#000'</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                chordStyle <span class="token operator">:</span> <span class="token punctuation">{</span>
                    lineStyle <span class="token operator">:</span> <span class="token punctuation">{</span>
                        width <span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
                        color <span class="token operator">:</span> <span class="token string">'#666'</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            emphasis <span class="token operator">:</span> <span class="token punctuation">{</span>
                lineStyle <span class="token operator">:</span> <span class="token punctuation">{</span>
                    width <span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
                    color <span class="token operator">:</span> <span class="token string">'#000'</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                chordStyle <span class="token operator">:</span> <span class="token punctuation">{</span>
                    lineStyle <span class="token operator">:</span> <span class="token punctuation">{</span>
                        width <span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
                        color <span class="token operator">:</span> <span class="token string">'#333'</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    island<span class="token operator">:</span> <span class="token punctuation">{</span>
        r<span class="token operator">:</span> <span class="token number">15</span><span class="token punctuation">,</span>
        calculateStep<span class="token operator">:</span> <span class="token number">0.1</span>  <span class="token comment">// 滚轮可计算步长 0.1 = 10%</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    markPoint <span class="token operator">:</span> <span class="token punctuation">{</span>
        symbol<span class="token operator">:</span> <span class="token string">'pin'</span><span class="token punctuation">,</span>         <span class="token comment">// 标注类型</span>
        symbolSize<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>        <span class="token comment">// 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2</span>
        <span class="token comment">//symbolRotate : null, // 标注旋转控制</span>
        itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
            normal<span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token comment">// color: 各异，</span>
                <span class="token comment">// borderColor: 各异,     // 标注边线颜色，优先于color </span>
                borderWidth<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>            <span class="token comment">// 标注边线线宽，单位px，默认为1</span>
                label<span class="token operator">:</span> <span class="token punctuation">{</span>
                    show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
                    position<span class="token operator">:</span> <span class="token string">'inside'</span> <span class="token comment">// 可选为'left'|'right'|'top'|'bottom'</span>
                    <span class="token comment">// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            emphasis<span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token comment">// color: 各异</span>
                label<span class="token operator">:</span> <span class="token punctuation">{</span>
                    show<span class="token operator">:</span> <span class="token boolean">true</span>
                    <span class="token comment">// position: 'inside'  // 'left'|'right'|'top'|'bottom'</span>
                    <span class="token comment">// textStyle: null     // 默认使用全局文本样式，详见TEXTSTYLE</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    markLine <span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token comment">// 标线起始和结束的symbol介绍类型，如果都一样，可以直接传string</span>
        symbol<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'circle'</span><span class="token punctuation">,</span> <span class="token string">'arrow'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>  
        <span class="token comment">// 标线起始和结束的symbol大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2</span>
        symbolSize<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token comment">// 标线起始和结束的symbol旋转控制</span>
        <span class="token comment">//symbolRotate : null,</span>
        itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
            normal<span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token comment">// color: 各异,           // 标线主色，线色，symbol主色</span>
                <span class="token comment">// borderColor: 随color,     // 标线symbol边框颜色，优先于color </span>
                borderWidth<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>          <span class="token comment">// 标线symbol边框线宽，单位px，默认为2</span>
                label<span class="token operator">:</span> <span class="token punctuation">{</span>
                    show<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
                    <span class="token comment">// 可选为 'start'|'end'|'left'|'right'|'top'|'bottom'</span>
                    position<span class="token operator">:</span> <span class="token string">'inside'</span><span class="token punctuation">,</span>  
                    textStyle<span class="token operator">:</span> <span class="token punctuation">{</span>         <span class="token comment">// 默认使用全局文本样式，详见TEXTSTYLE</span>
                        color<span class="token operator">:</span> <span class="token string">'#333'</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                lineStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
                    <span class="token comment">// color: 随borderColor, // 主色，线色，优先级高于borderColor和color</span>
                    <span class="token comment">// width: 随borderWidth, // 优先于borderWidth</span>
                    type<span class="token operator">:</span> <span class="token string">'solid'</span><span class="token punctuation">,</span>
                    shadowColor <span class="token operator">:</span> <span class="token string">'rgba(0,0,0,0)'</span><span class="token punctuation">,</span> <span class="token comment">//默认透明</span>
                    shadowBlur<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
                    shadowOffsetX<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
                    shadowOffsetY<span class="token operator">:</span> <span class="token number">3</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            emphasis<span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token comment">// color: 各异</span>
                label<span class="token operator">:</span> <span class="token punctuation">{</span>
                    show<span class="token operator">:</span> <span class="token boolean">false</span>
                    <span class="token comment">// position: 'inside' // 'left'|'right'|'top'|'bottom'</span>
                    <span class="token comment">// textStyle: null    // 默认使用全局文本样式，详见TEXTSTYLE</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                lineStyle <span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    textStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
        decoration<span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span>
        fontFamily<span class="token operator">:</span> <span class="token string">'Arial, Verdana, sans-serif'</span><span class="token punctuation">,</span>
        fontFamily2<span class="token operator">:</span> <span class="token string">'微软雅黑'</span><span class="token punctuation">,</span>    <span class="token comment">// IE8- 字体模糊并且不支持不同字体混排，额外指定一份</span>
        fontSize<span class="token operator">:</span> <span class="token number">12</span><span class="token punctuation">,</span>
        fontStyle<span class="token operator">:</span> <span class="token string">'normal'</span><span class="token punctuation">,</span>
        fontWeight<span class="token operator">:</span> <span class="token string">'normal'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 默认标志图形类型列表</span>
    symbolList <span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token string">'circle'</span><span class="token punctuation">,</span> <span class="token string">'rectangle'</span><span class="token punctuation">,</span> <span class="token string">'triangle'</span><span class="token punctuation">,</span> <span class="token string">'diamond'</span><span class="token punctuation">,</span>
      <span class="token string">'emptyCircle'</span><span class="token punctuation">,</span> <span class="token string">'emptyRectangle'</span><span class="token punctuation">,</span> <span class="token string">'emptyTriangle'</span><span class="token punctuation">,</span> <span class="token string">'emptyDiamond'</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    loadingText <span class="token operator">:</span> <span class="token string">'Loading...'</span><span class="token punctuation">,</span>
    <span class="token comment">// 可计算特性配置，孤岛，提示颜色</span>
    calculable<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>              <span class="token comment">// 默认关闭可计算特性</span>
    calculableColor<span class="token operator">:</span> <span class="token string">'rgba(255,165,0,0.6)'</span><span class="token punctuation">,</span>       <span class="token comment">// 拖拽提示边框颜色</span>
    calculableHolderColor<span class="token operator">:</span> <span class="token string">'#ccc'</span><span class="token punctuation">,</span> <span class="token comment">// 可计算占位提示颜色</span>
    nameConnector<span class="token operator">:</span> <span class="token string">' &amp; '</span><span class="token punctuation">,</span>
    valueConnector<span class="token operator">:</span> <span class="token string">' : '</span><span class="token punctuation">,</span>
    animation<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    animationThreshold<span class="token operator">:</span> <span class="token number">2500</span><span class="token punctuation">,</span>       <span class="token comment">// 动画元素阀值，产生的图形原素超过2500不出动画</span>
    addDataAnimation<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>         <span class="token comment">// 动态数据接口是否开启动画效果</span>
    animationDuration<span class="token operator">:</span> <span class="token number">2000</span><span class="token punctuation">,</span>
    animationEasing<span class="token operator">:</span> <span class="token string">'ExponentialOut'</span>    <span class="token comment">//BounceOut</span>
<span class="token punctuation">}</span>


不显示数值
axisLabel <span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">formatter</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
          <span class="token keyword">return</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br><span class="line-number">136</span><br><span class="line-number">137</span><br><span class="line-number">138</span><br><span class="line-number">139</span><br><span class="line-number">140</span><br><span class="line-number">141</span><br><span class="line-number">142</span><br><span class="line-number">143</span><br><span class="line-number">144</span><br><span class="line-number">145</span><br><span class="line-number">146</span><br><span class="line-number">147</span><br><span class="line-number">148</span><br><span class="line-number">149</span><br><span class="line-number">150</span><br><span class="line-number">151</span><br><span class="line-number">152</span><br><span class="line-number">153</span><br><span class="line-number">154</span><br><span class="line-number">155</span><br><span class="line-number">156</span><br><span class="line-number">157</span><br><span class="line-number">158</span><br><span class="line-number">159</span><br><span class="line-number">160</span><br><span class="line-number">161</span><br><span class="line-number">162</span><br><span class="line-number">163</span><br><span class="line-number">164</span><br><span class="line-number">165</span><br><span class="line-number">166</span><br><span class="line-number">167</span><br><span class="line-number">168</span><br><span class="line-number">169</span><br><span class="line-number">170</span><br><span class="line-number">171</span><br><span class="line-number">172</span><br><span class="line-number">173</span><br><span class="line-number">174</span><br><span class="line-number">175</span><br><span class="line-number">176</span><br><span class="line-number">177</span><br><span class="line-number">178</span><br><span class="line-number">179</span><br><span class="line-number">180</span><br><span class="line-number">181</span><br><span class="line-number">182</span><br><span class="line-number">183</span><br><span class="line-number">184</span><br><span class="line-number">185</span><br><span class="line-number">186</span><br><span class="line-number">187</span><br><span class="line-number">188</span><br><span class="line-number">189</span><br><span class="line-number">190</span><br><span class="line-number">191</span><br><span class="line-number">192</span><br><span class="line-number">193</span><br><span class="line-number">194</span><br><span class="line-number">195</span><br><span class="line-number">196</span><br><span class="line-number">197</span><br><span class="line-number">198</span><br><span class="line-number">199</span><br><span class="line-number">200</span><br><span class="line-number">201</span><br><span class="line-number">202</span><br><span class="line-number">203</span><br><span class="line-number">204</span><br><span class="line-number">205</span><br><span class="line-number">206</span><br><span class="line-number">207</span><br><span class="line-number">208</span><br><span class="line-number">209</span><br><span class="line-number">210</span><br><span class="line-number">211</span><br><span class="line-number">212</span><br><span class="line-number">213</span><br><span class="line-number">214</span><br><span class="line-number">215</span><br><span class="line-number">216</span><br><span class="line-number">217</span><br><span class="line-number">218</span><br><span class="line-number">219</span><br><span class="line-number">220</span><br><span class="line-number">221</span><br><span class="line-number">222</span><br><span class="line-number">223</span><br><span class="line-number">224</span><br><span class="line-number">225</span><br><span class="line-number">226</span><br><span class="line-number">227</span><br><span class="line-number">228</span><br><span class="line-number">229</span><br><span class="line-number">230</span><br><span class="line-number">231</span><br><span class="line-number">232</span><br><span class="line-number">233</span><br><span class="line-number">234</span><br><span class="line-number">235</span><br><span class="line-number">236</span><br><span class="line-number">237</span><br><span class="line-number">238</span><br><span class="line-number">239</span><br><span class="line-number">240</span><br><span class="line-number">241</span><br><span class="line-number">242</span><br><span class="line-number">243</span><br><span class="line-number">244</span><br><span class="line-number">245</span><br><span class="line-number">246</span><br><span class="line-number">247</span><br><span class="line-number">248</span><br><span class="line-number">249</span><br><span class="line-number">250</span><br><span class="line-number">251</span><br><span class="line-number">252</span><br><span class="line-number">253</span><br><span class="line-number">254</span><br><span class="line-number">255</span><br><span class="line-number">256</span><br><span class="line-number">257</span><br><span class="line-number">258</span><br><span class="line-number">259</span><br><span class="line-number">260</span><br><span class="line-number">261</span><br><span class="line-number">262</span><br><span class="line-number">263</span><br><span class="line-number">264</span><br><span class="line-number">265</span><br><span class="line-number">266</span><br><span class="line-number">267</span><br><span class="line-number">268</span><br><span class="line-number">269</span><br><span class="line-number">270</span><br><span class="line-number">271</span><br><span class="line-number">272</span><br><span class="line-number">273</span><br><span class="line-number">274</span><br><span class="line-number">275</span><br><span class="line-number">276</span><br><span class="line-number">277</span><br><span class="line-number">278</span><br><span class="line-number">279</span><br><span class="line-number">280</span><br><span class="line-number">281</span><br><span class="line-number">282</span><br><span class="line-number">283</span><br><span class="line-number">284</span><br><span class="line-number">285</span><br><span class="line-number">286</span><br><span class="line-number">287</span><br><span class="line-number">288</span><br><span class="line-number">289</span><br><span class="line-number">290</span><br><span class="line-number">291</span><br><span class="line-number">292</span><br><span class="line-number">293</span><br><span class="line-number">294</span><br><span class="line-number">295</span><br><span class="line-number">296</span><br><span class="line-number">297</span><br><span class="line-number">298</span><br><span class="line-number">299</span><br><span class="line-number">300</span><br><span class="line-number">301</span><br><span class="line-number">302</span><br><span class="line-number">303</span><br><span class="line-number">304</span><br><span class="line-number">305</span><br><span class="line-number">306</span><br><span class="line-number">307</span><br><span class="line-number">308</span><br><span class="line-number">309</span><br><span class="line-number">310</span><br><span class="line-number">311</span><br><span class="line-number">312</span><br><span class="line-number">313</span><br><span class="line-number">314</span><br><span class="line-number">315</span><br><span class="line-number">316</span><br><span class="line-number">317</span><br><span class="line-number">318</span><br><span class="line-number">319</span><br><span class="line-number">320</span><br><span class="line-number">321</span><br><span class="line-number">322</span><br><span class="line-number">323</span><br><span class="line-number">324</span><br><span class="line-number">325</span><br><span class="line-number">326</span><br><span class="line-number">327</span><br><span class="line-number">328</span><br><span class="line-number">329</span><br><span class="line-number">330</span><br><span class="line-number">331</span><br><span class="line-number">332</span><br><span class="line-number">333</span><br><span class="line-number">334</span><br><span class="line-number">335</span><br><span class="line-number">336</span><br><span class="line-number">337</span><br><span class="line-number">338</span><br><span class="line-number">339</span><br><span class="line-number">340</span><br><span class="line-number">341</span><br><span class="line-number">342</span><br><span class="line-number">343</span><br><span class="line-number">344</span><br><span class="line-number">345</span><br><span class="line-number">346</span><br><span class="line-number">347</span><br><span class="line-number">348</span><br><span class="line-number">349</span><br><span class="line-number">350</span><br><span class="line-number">351</span><br><span class="line-number">352</span><br><span class="line-number">353</span><br><span class="line-number">354</span><br><span class="line-number">355</span><br><span class="line-number">356</span><br><span class="line-number">357</span><br><span class="line-number">358</span><br><span class="line-number">359</span><br><span class="line-number">360</span><br><span class="line-number">361</span><br><span class="line-number">362</span><br><span class="line-number">363</span><br><span class="line-number">364</span><br><span class="line-number">365</span><br><span class="line-number">366</span><br><span class="line-number">367</span><br><span class="line-number">368</span><br><span class="line-number">369</span><br><span class="line-number">370</span><br><span class="line-number">371</span><br><span class="line-number">372</span><br><span class="line-number">373</span><br><span class="line-number">374</span><br><span class="line-number">375</span><br><span class="line-number">376</span><br><span class="line-number">377</span><br><span class="line-number">378</span><br><span class="line-number">379</span><br><span class="line-number">380</span><br><span class="line-number">381</span><br><span class="line-number">382</span><br><span class="line-number">383</span><br><span class="line-number">384</span><br><span class="line-number">385</span><br><span class="line-number">386</span><br><span class="line-number">387</span><br><span class="line-number">388</span><br><span class="line-number">389</span><br><span class="line-number">390</span><br><span class="line-number">391</span><br><span class="line-number">392</span><br><span class="line-number">393</span><br><span class="line-number">394</span><br><span class="line-number">395</span><br><span class="line-number">396</span><br><span class="line-number">397</span><br><span class="line-number">398</span><br><span class="line-number">399</span><br><span class="line-number">400</span><br><span class="line-number">401</span><br><span class="line-number">402</span><br><span class="line-number">403</span><br><span class="line-number">404</span><br><span class="line-number">405</span><br><span class="line-number">406</span><br><span class="line-number">407</span><br><span class="line-number">408</span><br><span class="line-number">409</span><br><span class="line-number">410</span><br><span class="line-number">411</span><br><span class="line-number">412</span><br><span class="line-number">413</span><br><span class="line-number">414</span><br><span class="line-number">415</span><br><span class="line-number">416</span><br><span class="line-number">417</span><br><span class="line-number">418</span><br><span class="line-number">419</span><br><span class="line-number">420</span><br><span class="line-number">421</span><br><span class="line-number">422</span><br><span class="line-number">423</span><br><span class="line-number">424</span><br><span class="line-number">425</span><br><span class="line-number">426</span><br><span class="line-number">427</span><br><span class="line-number">428</span><br><span class="line-number">429</span><br><span class="line-number">430</span><br><span class="line-number">431</span><br><span class="line-number">432</span><br><span class="line-number">433</span><br><span class="line-number">434</span><br><span class="line-number">435</span><br><span class="line-number">436</span><br><span class="line-number">437</span><br><span class="line-number">438</span><br><span class="line-number">439</span><br><span class="line-number">440</span><br><span class="line-number">441</span><br><span class="line-number">442</span><br><span class="line-number">443</span><br><span class="line-number">444</span><br><span class="line-number">445</span><br><span class="line-number">446</span><br><span class="line-number">447</span><br><span class="line-number">448</span><br><span class="line-number">449</span><br><span class="line-number">450</span><br><span class="line-number">451</span><br><span class="line-number">452</span><br><span class="line-number">453</span><br><span class="line-number">454</span><br><span class="line-number">455</span><br><span class="line-number">456</span><br><span class="line-number">457</span><br><span class="line-number">458</span><br><span class="line-number">459</span><br><span class="line-number">460</span><br><span class="line-number">461</span><br><span class="line-number">462</span><br><span class="line-number">463</span><br><span class="line-number">464</span><br><span class="line-number">465</span><br><span class="line-number">466</span><br><span class="line-number">467</span><br><span class="line-number">468</span><br><span class="line-number">469</span><br><span class="line-number">470</span><br><span class="line-number">471</span><br><span class="line-number">472</span><br><span class="line-number">473</span><br><span class="line-number">474</span><br><span class="line-number">475</span><br><span class="line-number">476</span><br><span class="line-number">477</span><br><span class="line-number">478</span><br><span class="line-number">479</span><br><span class="line-number">480</span><br><span class="line-number">481</span><br><span class="line-number">482</span><br><span class="line-number">483</span><br><span class="line-number">484</span><br><span class="line-number">485</span><br><span class="line-number">486</span><br><span class="line-number">487</span><br><span class="line-number">488</span><br><span class="line-number">489</span><br><span class="line-number">490</span><br><span class="line-number">491</span><br><span class="line-number">492</span><br><span class="line-number">493</span><br><span class="line-number">494</span><br><span class="line-number">495</span><br><span class="line-number">496</span><br><span class="line-number">497</span><br><span class="line-number">498</span><br><span class="line-number">499</span><br><span class="line-number">500</span><br><span class="line-number">501</span><br><span class="line-number">502</span><br><span class="line-number">503</span><br><span class="line-number">504</span><br><span class="line-number">505</span><br><span class="line-number">506</span><br><span class="line-number">507</span><br><span class="line-number">508</span><br><span class="line-number">509</span><br><span class="line-number">510</span><br><span class="line-number">511</span><br><span class="line-number">512</span><br><span class="line-number">513</span><br><span class="line-number">514</span><br><span class="line-number">515</span><br><span class="line-number">516</span><br><span class="line-number">517</span><br><span class="line-number">518</span><br><span class="line-number">519</span><br><span class="line-number">520</span><br><span class="line-number">521</span><br><span class="line-number">522</span><br><span class="line-number">523</span><br><span class="line-number">524</span><br><span class="line-number">525</span><br><span class="line-number">526</span><br><span class="line-number">527</span><br><span class="line-number">528</span><br><span class="line-number">529</span><br><span class="line-number">530</span><br><span class="line-number">531</span><br><span class="line-number">532</span><br><span class="line-number">533</span><br><span class="line-number">534</span><br><span class="line-number">535</span><br><span class="line-number">536</span><br><span class="line-number">537</span><br><span class="line-number">538</span><br><span class="line-number">539</span><br><span class="line-number">540</span><br><span class="line-number">541</span><br><span class="line-number">542</span><br><span class="line-number">543</span><br><span class="line-number">544</span><br><span class="line-number">545</span><br><span class="line-number">546</span><br><span class="line-number">547</span><br><span class="line-number">548</span><br><span class="line-number">549</span><br><span class="line-number">550</span><br><span class="line-number">551</span><br><span class="line-number">552</span><br><span class="line-number">553</span><br><span class="line-number">554</span><br><span class="line-number">555</span><br><span class="line-number">556</span><br><span class="line-number">557</span><br><span class="line-number">558</span><br><span class="line-number">559</span><br><span class="line-number">560</span><br><span class="line-number">561</span><br><span class="line-number">562</span><br><span class="line-number">563</span><br><span class="line-number">564</span><br><span class="line-number">565</span><br><span class="line-number">566</span><br><span class="line-number">567</span><br><span class="line-number">568</span><br><span class="line-number">569</span><br><span class="line-number">570</span><br><span class="line-number">571</span><br><span class="line-number">572</span><br><span class="line-number">573</span><br><span class="line-number">574</span><br><span class="line-number">575</span><br><span class="line-number">576</span><br><span class="line-number">577</span><br><span class="line-number">578</span><br><span class="line-number">579</span><br><span class="line-number">580</span><br><span class="line-number">581</span><br><span class="line-number">582</span><br><span class="line-number">583</span><br><span class="line-number">584</span><br><span class="line-number">585</span><br><span class="line-number">586</span><br><span class="line-number">587</span><br><span class="line-number">588</span><br><span class="line-number">589</span><br><span class="line-number">590</span><br><span class="line-number">591</span><br><span class="line-number">592</span><br><span class="line-number">593</span><br><span class="line-number">594</span><br><span class="line-number">595</span><br><span class="line-number">596</span><br><span class="line-number">597</span><br><span class="line-number">598</span><br><span class="line-number">599</span><br><span class="line-number">600</span><br><span class="line-number">601</span><br><span class="line-number">602</span><br><span class="line-number">603</span><br><span class="line-number">604</span><br><span class="line-number">605</span><br><span class="line-number">606</span><br><span class="line-number">607</span><br><span class="line-number">608</span><br><span class="line-number">609</span><br><span class="line-number">610</span><br><span class="line-number">611</span><br><span class="line-number">612</span><br><span class="line-number">613</span><br><span class="line-number">614</span><br><span class="line-number">615</span><br><span class="line-number">616</span><br><span class="line-number">617</span><br><span class="line-number">618</span><br><span class="line-number">619</span><br><span class="line-number">620</span><br><span class="line-number">621</span><br><span class="line-number">622</span><br><span class="line-number">623</span><br><span class="line-number">624</span><br><span class="line-number">625</span><br><span class="line-number">626</span><br><span class="line-number">627</span><br><span class="line-number">628</span><br><span class="line-number">629</span><br><span class="line-number">630</span><br><span class="line-number">631</span><br><span class="line-number">632</span><br><span class="line-number">633</span><br><span class="line-number">634</span><br><span class="line-number">635</span><br><span class="line-number">636</span><br><span class="line-number">637</span><br><span class="line-number">638</span><br><span class="line-number">639</span><br><span class="line-number">640</span><br><span class="line-number">641</span><br><span class="line-number">642</span><br><span class="line-number">643</span><br><span class="line-number">644</span><br><span class="line-number">645</span><br><span class="line-number">646</span><br><span class="line-number">647</span><br><span class="line-number">648</span><br><span class="line-number">649</span><br><span class="line-number">650</span><br><span class="line-number">651</span><br><span class="line-number">652</span><br><span class="line-number">653</span><br><span class="line-number">654</span><br><span class="line-number">655</span><br><span class="line-number">656</span><br><span class="line-number">657</span><br><span class="line-number">658</span><br><span class="line-number">659</span><br><span class="line-number">660</span><br><span class="line-number">661</span><br><span class="line-number">662</span><br><span class="line-number">663</span><br><span class="line-number">664</span><br><span class="line-number">665</span><br><span class="line-number">666</span><br><span class="line-number">667</span><br><span class="line-number">668</span><br><span class="line-number">669</span><br><span class="line-number">670</span><br><span class="line-number">671</span><br><span class="line-number">672</span><br><span class="line-number">673</span><br><span class="line-number">674</span><br><span class="line-number">675</span><br><span class="line-number">676</span><br><span class="line-number">677</span><br><span class="line-number">678</span><br><span class="line-number">679</span><br><span class="line-number">680</span><br><span class="line-number">681</span><br><span class="line-number">682</span><br><span class="line-number">683</span><br><span class="line-number">684</span><br><span class="line-number">685</span><br><span class="line-number">686</span><br><span class="line-number">687</span><br><span class="line-number">688</span><br><span class="line-number">689</span><br><span class="line-number">690</span><br><span class="line-number">691</span><br><span class="line-number">692</span><br><span class="line-number">693</span><br><span class="line-number">694</span><br><span class="line-number">695</span><br><span class="line-number">696</span><br><span class="line-number">697</span><br><span class="line-number">698</span><br><span class="line-number">699</span><br><span class="line-number">700</span><br><span class="line-number">701</span><br><span class="line-number">702</span><br><span class="line-number">703</span><br><span class="line-number">704</span><br><span class="line-number">705</span><br><span class="line-number">706</span><br><span class="line-number">707</span><br><span class="line-number">708</span><br><span class="line-number">709</span><br><span class="line-number">710</span><br><span class="line-number">711</span><br><span class="line-number">712</span><br><span class="line-number">713</span><br><span class="line-number">714</span><br><span class="line-number">715</span><br><span class="line-number">716</span><br><span class="line-number">717</span><br><span class="line-number">718</span><br><span class="line-number">719</span><br><span class="line-number">720</span><br><span class="line-number">721</span><br><span class="line-number">722</span><br><span class="line-number">723</span><br><span class="line-number">724</span><br><span class="line-number">725</span><br><span class="line-number">726</span><br><span class="line-number">727</span><br><span class="line-number">728</span><br><span class="line-number">729</span><br><span class="line-number">730</span><br><span class="line-number">731</span><br><span class="line-number">732</span><br><span class="line-number">733</span><br><span class="line-number">734</span><br><span class="line-number">735</span><br><span class="line-number">736</span><br><span class="line-number">737</span><br><span class="line-number">738</span><br><span class="line-number">739</span><br><span class="line-number">740</span><br><span class="line-number">741</span><br><span class="line-number">742</span><br><span class="line-number">743</span><br><span class="line-number">744</span><br><span class="line-number">745</span><br><span class="line-number">746</span><br><span class="line-number">747</span><br></div></div><h2 id="git-多人协作"><a href="#git-多人协作" class="header-anchor">#</a> Git 多人协作</h2> <p>1，git clone<br>
//  克隆代码</p> <p>2,  git  checkout -b  newbranch
//  新建分支并切换到该分支</p> <p>3,  ( coding )
//  完成你的编码工作</p> <p>4,   git fetch origin
//  拉取远程仓库所有分支</p> <p>5,   git merge origin/master
//  合并分支</p> <p>6,   (solve conflicts)
//  解决冲突</p> <p>—— 提交到仓库</p> <p>7,   git add .</p> <p>8,   git commit -m  ‘update’</p> <p>9,    git push origin newbranch</p> <p>10,  github中 newbranch 分支请求  合并分支（合并到merge）</p> <p>补充：</p> <ol><li>git pull  == git fetch + git merge</li> <li>不允许直接将代码推送到master分支，应该使用其他分支合并</li> <li>不允许由旧分支向新分支发起合并请求</li></ol> <p>https://segmentfault.com/a/1190000023372998</p> <h2 id="保留小数"><a href="#保留小数" class="header-anchor">#</a> 保留小数</h2> <p>1, tofixed(): JavaScript toFixed() 方法JavaScript Number 对象实例把数字转换为字符串，结果的小数点后有指定位数的数字</p> <p>2,
Math.floor(3.14)  // 将数字向下舍入为最接近的整数，并返回结果
Math.ceil(3.14)   // 将数字向上取整为最接近的整数，并返回结果
Math.round(3.14) // Java round() 方法Java Number类round() 方法返回一个最接近的int、long 型值，四舍五入。 round 表示“四舍五入”</p> <h2 id="_2-项目中如何优雅的使用icon"><a href="#_2-项目中如何优雅的使用icon" class="header-anchor">#</a> 2， 项目中如何优雅的使用icon</h2> <h2 id="vue中-native-修饰符的使用"><a href="#vue中-native-修饰符的使用" class="header-anchor">#</a> vue中'. native'修饰符的使用</h2> <p>现在在组件上使用 v-on 只会监听自定义事件 (组件用 $emit 触发的事件)。如果要监听根元素的原生事件，可以使用 .native 修饰符，比如：
<my-component></my-component></p> <h2 id="发布-npm-包"><a href="#发布-npm-包" class="header-anchor">#</a> 发布 npm 包</h2> <ol><li>注册一个npm帐号 https://www.npmjs.com/signup’，并验证邮箱。邮箱未验证的话，不能发布模块，超时未验证可以在account中按照提示验证。</li> <li>创建一个目录，如npm-package， ` cd  npm-package   npm init</li> <li>发布前要先登陆 npm login， 利用刚才注册的账号密码邮箱登陆</li> <li>发布 npm publish</li></ol> <p>Err:</p> <ol><li>发布到 npmjs.org 的话， npm registry 得切换到 官网   npm config set registry  http://www.npmjs.org</li> <li>包名和已有的包名相近时，可以修改 name即可</li> <li>当修改包名为 类似于 @lisi/singlePage 会被认为是私包，（私包收费），此时，发布用 npm publish --access public</li></ol></div> <footer class="page-edit" style="display:none;"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">7/27/2022, 8:13:22 PM</span></div></footer> <!----> <!----> <!----></main> <!----></div></div></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-c6073ba8 data-v-c6073ba8><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-c6073ba8><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-c6073ba8></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-c6073ba8></path></svg></div><div class="kanbanniang" data-v-5775ee02><div class="banniang-container" style="display:;" data-v-5775ee02><div class="messageBox" style="right:68px;bottom:190px;display:none;" data-v-5775ee02>
      欢迎来到 Will's blog
    </div> <div class="operation" style="right:90px;bottom:40px;display:none;" data-v-5775ee02><i class="kbnfont kbn-ban-home ban-home" data-v-5775ee02></i> <i class="kbnfont kbn-ban-message message" data-v-5775ee02></i> <i class="kbnfont kbn-ban-close close" data-v-5775ee02></i> <a target="_blank" href="https://vuepress-theme-reco.recoluan.com/views/plugins/kanbanniang.html" data-v-5775ee02><i class="kbnfont kbn-ban-info info" data-v-5775ee02></i></a> <i class="kbnfont kbn-ban-theme skin" style="display:none;" data-v-5775ee02></i></div> <canvas id="banniang" width="150" height="220" class="live2d" style="right:90px;bottom:0px;opacity:1;" data-v-5775ee02></canvas></div> <div class="showBanNiang" style="display:none;" data-v-5775ee02>
    看板娘
  </div></div><div></div><canvas id="vuepress-canvas-cursor"></canvas></div></div>
    <script src="/will/assets/js/app.e77fe8ad.js" defer></script><script src="/will/assets/js/3.19d8dd7e.js" defer></script><script src="/will/assets/js/1.cde8b311.js" defer></script><script src="/will/assets/js/117.c980193e.js" defer></script>
  </body>
</html>
